<template>
  <div class="rightbox" v-cloak>
    <h1>广告列表</h1>
    <el-row  style="width: 96%;margin:2%">
      <el-col :span="3">
        <el-input v-model="key" placeholder="输入关键字"></el-input>
      </el-col>
      <el-col :span="3">
        <el-select v-model="state" placeholder="状态"  style="margin-left:10px;">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="-1"></el-option>
        </el-select>
      </el-col>
      <el-col :span="4" style="margin-left:10px;">
        <el-select v-model="advertindex" placeholder="请选择广告位置">
          <el-option
            v-for="item in adData"
            :key="item.advertindex"
            :label="item.name"
            :value="item.advertindex">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="1" style="margin-left:20px;">
        <el-button type="primary" @click="Search">查询</el-button>
      </el-col>
    </el-row>
    <el-table
    :data="contentList"
    border
    style="width: 96%;margin:2%">
      <el-table-column
        prop="advertName"
        label="广告位">
      </el-table-column>
      <el-table-column
        prop="title"
        label="广告标题">
      </el-table-column>
      <el-table-column
        prop=""
        label="广告素材">
        <template slot-scope="scope">
          <div v-for="item in scope.row.mapinfo" :key="item.index">
            <img style="width:200px" :src="item.value">
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="website"
        label="链接地址">
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态">
        <template slot-scope="scope">
          <span v-if="scope.row.state == -1">禁用</span>
          <span v-if="scope.row.state == 1">启用</span>
        </template>
      </el-table-column>
      <el-table-column
        prop=""
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="Modify(scope)">修改</el-button>
          <el-button type="text" size="small" @click="Delete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// import axios from 'axios'
// import qs from 'qs'
export default {
  data () {
    return {
      adData: [],
      advertindex: '',
      contentList: [],
      advertname: '',
      key: '',
      state: '1'
    }
  },
  methods: {
    getData () {
      var that = this
      that.$axios.request('post', '/Advert/Index')
        .then((res) => {
          if (res.code === 0) {
            that.adData = res.data
          }
        })
    },
    Search: function () {
      var that = this
      that.getList()
    },
    getList: function () {
      var that = this
      that.$axios.request('post', '/Advert/GetList', {
        advertindex: that.advertindex,
        key: that.key,
        state: that.state
      })
        .then((res) => {
          if (res.code === 0) {
            that.contentList = res.data
          }
        })
    },
    handleCurrentChange (val) {
      var that = this
      that.pageindex = val
      that.getList()
    },
    Modify: function (scope) {
      var that = this
      that.$router.push({
        name: 'adModify',
        params: {
          advertinfoindex: scope.row.advertinfoindex
        }
      })
    },
    Delete: function (scope) {
      var that = this
      that.$pub.open()
      that.$axios.request('post', '/Advert/Delete', {
        advertinfoindex: scope.row.advertinfoindex
      })
        .then((res) => {
          if (res.code === 0) {
            that.$axios.messageTwo('删除成功', '消息提示')
            that.getList()
          }
        })
    }
  },
  mounted () {
    this.getData()
    this.getList()
  }
}
</script>
